export default {
    props: {
        // 使用者window实例 必定义
        appWindow: {
            type: Object,
            default: null,
        },
        value: {
            type: Array,
            default: [],
        },
        // 是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
        // 禁止选择的ids
        cannotSelectIds: {
            type: Array,
            default: [],
        },

        // 最大选择数量
        count: {
            type: Number,
            default: -1,
        },
    },

    components: {
        Draggable: async () =>
            Vue.extend(await Vue.prototype.$vFN.Components.Base.Draggable()),
    },
    data() {
        return {
            // 外部传入
            appWindow: null,
            // 外部传入
            apiConfig: null,
            dataList: [],
            loading: false,
            // 是否允许获取数据   在用户移除商品时不会请求接口重新获取商品信息
            isUpdateData: true,
             // 不可选择的ids
             cannotSelectIds:[],
        };
    },
    computed: {

    },
    methods: {

        onSelected() {
            if(this.disabled){
                return
            }
            this.$vFN.Directives[this.$options.name]({
                count: this.count,
                appWindow: this.appWindow,
                selectIds: this.value,
                apiConfig: this.apiConfig,
                cannotSelectIds: this.cannotSelectIds,
                onSuccess: (res) => {
                    this.$emit("input", res);
                },
            });
        },
        async deleteItem(_id) {
            this.dataList.forEach((item, index) => {
                if (item.id == _id) {
                    this.dataList.splice(index, 1);
                }
            });

            let _arr = this.dataList.map((item) => {
                return item.id;
            });

            this.isUpdateData = false;
            this.$emit("input", _arr);
        },
        endDraggable(e) {
            console.error(e);
            this.isUpdateData = false;
            let _ids = [...this.value];

            let _newIndex = e.newIndex;
            let _oldIndex = e.oldIndex;
            let _newValue = _ids[_newIndex];
            let _oldValue = _ids[_oldIndex];

            _ids[_oldIndex] = _newValue;
            _ids[_newIndex] = _oldValue;
            this.$emit("input", _ids);
        },
        async getInfoData() {
            this.loading = true;
            this.dataList = await this.getData();
            // 去除失效的id
            let _ids = []
            this.dataList.forEach(item => {
                _ids.push(item.id)
            })
            this.isUpdateData = false;
            this.$emit("input", _ids);
            this.loading = false;
        },
    },
    watch: {
        value: {
            handler(newVal, oldVal) {
                
                if (!this.$vFN.Utils.isEmpty(newVal) && this.isUpdateData && JSON.stringify(newVal)!=JSON.stringify(oldVal)) {
                    this.getInfoData();
                }
                if (!this.isUpdateData) {
                    this.isUpdateData = true;
                }
            },
            immediate: true,
            deep: true,
        },
        dataList: {
            handler(newVal, oldVal) {
                console.error("change", newVal)
                this.$emit("change", newVal)
            },
            immediate: true,
            deep: true,
        },
    },
}